import {
  Flex,
  Text,
  Stack,
  Box,
  Avatar,
  Tabs,
  TabList,
  Tab,
  TabPanel,
  TabPanels,
} from "@chakra-ui/react";
import { Image, Shimmer } from "react-shimmer";
import { Navigate, useParams } from "react-router-dom";
import { MainLayout } from "../components/layouts/MainLayout";
import { Card } from "../components/Card";
import { ProfileItem } from "../components/ProfileItem";
import { MissionEntry } from "../components/MissionEntry";
import { ProfileShortcutPanel } from "../components/sections/ShortcutPanel";
import { UserType } from "./Mission";
import { useQuery } from "react-query";
import { MissionType } from "./Home";

export const Profile = () => {
  let { username } = useParams<string>();
  let isCurrentUser = !username;
  const { data: profileData } = useQuery<UserType, any>(`profile`, () =>
    fetch(`/api/profile`, {
      headers: {
        Authorization: "Bearer " + String(localStorage.getItem("accessToken")),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        return res;
      })
  );

  const { data: appliedmissionData } = useQuery<MissionType[], any>(
    `appied_missions`,
    () =>
      fetch(`/api/applied_missions`, {
        headers: {
          Authorization:
            "Bearer " + String(localStorage.getItem("accessToken")),
        },
      })
        .then((res) => res.json())
        .then((res) => {
          console.log(res);
          return res;
        })
  );

  return localStorage.getItem("accessToken") ? (
    <MainLayout>
      <Card position="relative" width="100%" p="0">
        <Flex direction="column">
          <Box height="240px" width="100%">
            <Image
              NativeImgProps={{
                style: { width: "100%", height: "100%", objectFit: "cover" },
              }}
              src="https://source.unsplash.com/collection/404339/800x600"
              fallback={<Shimmer height={240} width={960} />}
            />
          </Box>
          <Avatar
            position="absolute"
            width={200}
            height={200}
            top={170}
            ml="6"
            p="1"
          />
          <Flex p="6" pl={230} minH={150}>
            <Stack ml="6" spacing="1">
              <Stack direction="row" align="baseline">
                <Text fontSize="2xl" fontWeight="bold">
                  {profileData?.username}
                </Text>
                <Box color="gray.500">
                  <ProfileItem
                    label="个人介绍"
                    profileKey="description"
                    value={
                      profileData?.description === null
                        ? "该用户很懒，还没有个人介绍。"
                        : profileData?.description
                    }
                    isEditable={isCurrentUser}
                    hideLabel
                  />
                </Box>
              </Stack>
              <ProfileItem
                label="学院"
                profileKey="department"
                value={profileData?.department}
                isEditable={isCurrentUser}
              />

              <ProfileItem
                label="手机"
                profileKey="phone"
                value={profileData?.phone}
                isEditable={isCurrentUser}
              />

              <ProfileItem
                label="积分"
                profileKey="credit"
                value={profileData?.credit}
              />

              <ProfileItem
                label="等级"
                profileKey="level"
                value={profileData?.level}
              />
            </Stack>
          </Flex>
        </Flex>
      </Card>

      <Flex width="100%" justify="space-between" mt={2} zIndex={1}>
        <Box width="100%" flex={7} mr={1}>
          <Tabs>
            {/* TabList 选项卡标题 */}
            <TabList>
              {/* Tab 单个标题 */}
              <Tab _focus={{ boxShadow: "none" }}>发布的任务</Tab>
              <Tab _focus={{ boxShadow: "none" }}>申请的任务</Tab>
            </TabList>
            {/* TabPanels 选项卡内容 */}

            <TabPanels>
              {/* TabPanel 单个内容 */}
              <TabPanel>
                <Stack>
                  {profileData?.missions
                    .sort((a, b) => Number(b.id) - Number(a.id))
                    .map((mission) => (
                      <MissionEntry
                        key={mission.id}
                        id={mission.id}
                        title={mission.title}
                        type={mission.type}
                        description={mission.description}
                        owner={mission.owner.username}
                        is_owner={mission.is_owner}
                        state={mission.state}
                        link={`/mission/${mission.id}`}
                      />
                    ))}
                </Stack>
              </TabPanel>

              <TabPanel>
                <Stack>
                  {appliedmissionData
                    ?.sort((a, b) => Number(b.id) - Number(a.id))
                    .map((mission) => (
                      <MissionEntry
                        key={mission.id}
                        id={mission.id}
                        title={mission.title}
                        type={mission.type}
                        description={mission.description}
                        owner={mission.owner.username}
                        is_owner={mission.is_owner}
                        state={mission.state}
                        link={`/mission/${mission.id}`}
                      />
                    ))}
                </Stack>
              </TabPanel>
            </TabPanels>
          </Tabs>
        </Box>
        <Box width="100%" flex={3} ml={1}>
          <ProfileShortcutPanel></ProfileShortcutPanel>
        </Box>
      </Flex>
    </MainLayout>
  ) : (
    <Navigate to="/" />
  );
};
